<template id='register'>
  <div class="register">
    <div class="pc">
      <div class="pcContent">
        <div class="top">
          <p>{{ statics.title }}</p>
          <p>{{ statics.title2 }}</p>
        </div>
        <div class="startBtn btn phoneBtn" v-dc="openSign">Get Started</div>
        <div class="center">
          <p>{{ statics.desc }}</p>
          <p>{{ statics.desc2 }}</p>
        </div>
        <div class="startBtn btn" v-dc="openSign">Get Started</div>
      </div>


    </div>
    <!----------------------弹窗 ---------------------->
    <transition :name="maskTransition">
      <div class="disCenter mask" @click="closeMask()" v-show="isShowPopup">
        <!--------登录弹窗 -------->
        <Sign @submit="signIn" @forgot="forgot" ref="sign"></Sign>
        <!--------忘记密码输入邮箱弹窗 -------->
        <Retrieve @submit="retrieveNext" ref="retrieve"></Retrieve>
        <!--------邮箱确认弹窗 -------->
        <EmailVerification @submit="submitEmailVerify" ref="emailVerify" :step="step"></EmailVerification>
        <!--------新密码弹窗 -------->
        <NewPassword @submit="submitNewPassword" ref="newPassword" :type="`forgot`"></NewPassword>
      </div>
    </transition>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const emailVerify = createNamespacedHelpers('emailVerify')
const newPassword = createNamespacedHelpers('newPassword')
const sign = createNamespacedHelpers("sign");
const retrieve = createNamespacedHelpers("retrieve");
import Sign from "./Sign.vue";
import Retrieve from "./Retrieve.vue";
import EmailVerification from "./EmailVerification.vue";
import NewPassword from "../profile/NewPassword.vue";
import { showMessage } from "../../utils";


// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "register",
  components: {
    EmailVerification,
    Sign,
    Retrieve,
    NewPassword
  },
  // 定义属性
  data() {
    return {
      maskTransition: "",
      step: 0, //当前步骤
      isShowPopup: false,//背景遮罩
      statics: {
        //静态描述
        title:
          "For more than 2000 years, intellectuals are known to carry with themselves a little handbook that contains their thoughts, wisdom and quotations. ",
        title2: "It is refered to as an Enchiridion",
        desc: "And now, Enchi.io is created with a mind for more than that.",
        desc2:
          "e you can start your own enchiridion by writing down your thoughts, importing highlights and quotations from e- readers, clipping web content and have everything managed with ease.",
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...emailVerify.mapState(['emailVerifyData']),
    ...newPassword.mapState(['newPasswordData']),
    ...sign.mapState(['signData']),
  },
  // 监控data中的数据变化
  watch: {
    isShowPopup: {
      handler(newName, oldName) {
        if (newName) {
          this.maskTransition = "maskEnter";
        } else {
          this.maskTransition = "maskLeave";
        }
      },
      immediate: true,
      deep: true,
    },
  },
  // 方法集合
  methods: {
    ...sign.mapMutations(['openSignPop', 'closeSignPop', 'getRemember', 'resetState']),
    ...retrieve.mapMutations(['openRetrievePop', 'closeRetrievePop']),
    ...emailVerify.mapMutations(['openEmailVerifyPop', 'closeEmailVerifyPop']),
    ...newPassword.mapMutations(["openNewPasswordPop", 'closeNewPasswordPop']),
    //------------------------弹窗------------------------
    closeMask() {
      switch (this.step) {
        case 1://登录
          this.closeSign();
          this.isShowPopup = false;
          break;
        case 2://忘记密码输入邮箱
          this.closeRetrieve();
          this.openSign('contentLeaveRotate')
          break;
        case 3://修改密码邮箱校验
          this.closeEmailVerify();
          this.openRetrieve('contentLeaveRotate')
          break;
        case 4://修改密码
          this.closeNewPassword();
          this.openEmailVerify('contentLeaveRotate')
          break;
        case 5://注册邮箱校验
          this.closeEmailVerify();
          this.openSign('contentLeaveRotate')
          break;
      }
    },
    //--------------登录弹窗--------------
    //打开登录弹窗
    openSign(type) {
      this.getRemember();
      this.isShowPopup = true;
      this.step = 1;
      this.openSignPop(type)
    },
    //关闭登录弹窗
    closeSign(type) {
      this.step = 0;
      this.$refs.sign.reset();
      this.closeSignPop(type);
    },
    //登录
    signIn(payload) {
      if (payload == 'register') {
        this.closeSign('contentEnterRotate');
        this.openEmailVerify('contentLeaveRotate');
        this.step = 5;
      } else {
        this.closeSign();
        this.login();
      }
    },
    login() {
      this.$router.push('/homePage')
    },
    //忘记密码
    forgot() {
      this.closeSign('contentEnterRotate');
      this.openRetrieve('contentLeaveRotate')
    },
    //--------------忘记密码弹窗--------------
    //打开忘记密码输入邮箱弹窗
    openRetrieve(type) {
      this.step = 2;
      this.openRetrievePop(type)
    },
    //关闭忘记密码输入邮箱弹窗
    closeRetrieve(type) {
      this.$refs.retrieve.reset();
      this.closeRetrievePop(type)
    },
    //忘记密码输入邮箱下一步
    retrieveNext() {
      this.closeRetrieve('contentEnterRotate');
      this.openEmailVerify('contentLeaveRotate')
    },
    //--------------邮箱验证码弹窗--------------

    //打开邮箱验证码弹窗
    openEmailVerify(type) {
      this.step = 3;
      this.openEmailVerifyPop(type);
    },
    //关闭邮箱验证码弹窗
    closeEmailVerify(type) {
      this.$refs.emailVerify.reset();
      this.closeEmailVerifyPop(type);
    },
    //提交邮箱验证码弹窗
    submitEmailVerify() {
      if (this.step == 5) {
        this.closeEmailVerify('contentLeaveTop')
        setTimeout(() => {
          this.login();
          this.isShowPopup = false;
        }, 300);

      } else {
        this.closeEmailVerify('contentEnterRotate')
        this.openNewPassword('contentLeaveRotate')
      }

    },
    //--------------提交新密码弹窗--------------
    //打开新密码弹窗
    openNewPassword(type) {
      this.step = 4;
      this.openNewPasswordPop(type);
    },
    //关闭新密码弹窗
    closeNewPassword(type) {
      this.$refs.newPassword.reset();
      this.closeNewPasswordPop(type);
    },
    //提交新密码弹窗
    submitNewPassword() {
      this.closeNewPassword('contentLeaveTop')
      this.resetState();
      setTimeout(() => {
        this.isShowPopup = true;
        this.step = 1;
        this.openSignPop()
      }, 300);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
      this.openSign()
    }, 1000);
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.register {
  height: 100%;
}

.pc {
  background: url("~@/assets/images/index/pc/bg.jpg");
  background-size: 100% 100%;
  // max-width: 1440px;
  height: 100%;
  background-color: rgba(52, 52, 52, 0.36);

  .pcContent {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      margin-top: 151px;
      width: 691px;
      height: 222px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 30px;
      line-height: 1.2;
      color: @tColor;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
    }

    .center {
      font-size: 18px;
      width: 762px;
      height: 75px;
      color: #dadada;
      line-height: 1.2;
      margin-top: 52px;
    }

    .startBtn {
      margin-top: 54px;
    }

    .phoneBtn {
      display: none;
    }
  }

  .descs {
    margin-top: 26px;
    text-align: center;

    .desc {
      color: #a8a8a8;
      font-size: 18px;
      margin-top: 15px;
    }

    .desc:nth-child(1) {
      margin-top: 0px;
    }
  }

  .form {
    margin-top: 30px;
  }
}

@media screen and (max-width: 900px) {
  .register {
    .pc {
      .pcContent {

        .top,
        .center {
          width: 70%;
        }

        .startBtn {
          margin-top: 90px;
        }
      }
    }
  }
}

@media screen and (max-width: 780px) {
  .register {
    .pc {
      height: 963px;

      .pcContent {
        .top {
          height: inherit;
          line-height: 1.3;

          p:last-child {
            margin-top: 10px;
          }
        }

        .center {
          height: inherit;
          line-height: 1.5;
        }
      }

    }


  }
}

//手机样式
@media screen and (max-width: 650px) {
  .register {
    .pc {

      .pcContent {
        padding: 0 20px;

        .top {
          width: 100%;
          margin-top: 36px;
          min-height: 300px;

          p {
            margin-top: 0px !important;
            font-size: 24px;
            line-height: 1.5;
          }
        }

        .center {
          margin-top: 80px;
          width: 100%;
          min-height: 177px;
          font-size: 16px;
          line-height: 1.5;
        }

        .startBtn {
          display: none;
        }

        .phoneBtn {
          margin-top: 80px;
          display: flex;
        }
      }
    }
  }

}
</style>